<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 快速演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .demo-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 8px 16px;
            cursor: pointer;
            border-radius: 3px;
        }
        button:hover {
            background-color: #45a049;
        }
        input {
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        .highlight {
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 3px;
            font-family: monospace;
        }
        .color-box {
            width: 100px;
            height: 100px;
            margin: 10px 0;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
    </style>
    <!-- 引入Vue.js，使用多个CDN源作为备用 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script>if (typeof Vue === 'undefined') { document.write('<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"><\/script>'); }</script>
</head>
<body>
    <h1>Vue.js 快速演示</h1>
    <p>这是一个使用CDN方式引入Vue.js的简单示例，展示了Vue的核心功能。</p>

    <div id="app">
        <!-- 基本数据绑定 -->
        <div class="demo-section">
            <h2>1. 基本数据绑定</h2>
            <p>数据: {{ message }}</p>
            <p v-text="message"></p>
            <p v-html="htmlContent"></p>
        </div>

        <!-- 双向数据绑定 -->
        <div class="demo-section">
            <h2>2. 双向数据绑定 (v-model)</h2>
            <p>输入内容：<input v-model="inputText" placeholder="请输入文本"></p>
            <p>你输入的是：<strong>{{ inputText }}</strong></p>
        </div>

        <!-- 事件处理 -->
        <div class="demo-section">
            <h2>3. 事件处理 (v-on)</h2>
            <p>点击次数: {{ clickCount }}</p>
            <button v-on:click="increment">点击增加</button>
            <button @click="decrement">点击减少</button>
        </div>

        <!-- 条件渲染 -->
        <div class="demo-section">
            <h2>4. 条件渲染 (v-if/v-show)</h2>
            <button @click="toggleVisibility">切换显示</button>
            <p v-if="isVisible">这段文字使用 v-if 条件渲染</p>
            <p v-show="isVisible">这段文字使用 v-show 条件渲染</p>
        </div>

        <!-- 列表渲染 -->
        <div class="demo-section">
            <h2>5. 列表渲染 (v-for)</h2>
            <ul>
                <li v-for="(item, index) in items" :key="index">
                    {{ index + 1 }}. {{ item }}
                </li>
            </ul>
        </div>

        <!-- 样式绑定 -->
        <div class="demo-section">
            <h2>6. 样式绑定</h2>
            <p>输入颜色: <input v-model="bgColor" placeholder="例如: #ff0000"></p>
            <div class="color-box" :style="{ backgroundColor: bgColor }"></div>
        </div>

        <!-- 计算属性 -->
        <div class="demo-section">
            <h2>7. 计算属性</h2>
            <p>原始文本: {{ inputText }}</p>
            <p>反转文本: {{ reversedText }}</p>
        </div>

        <!-- 方法调用 -->
        <div class="demo-section">
            <h2>8. 方法调用</h2>
            <p>当前时间: {{ currentTime }}</p>
            <button @click="updateTime">更新时间</button>
        </div>
    </div>

    <script>
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!',
                htmlContent: '<strong>这是HTML内容</strong>',
                inputText: '',
                clickCount: 0,
                isVisible: true,
                items: ['学习Vue', '掌握组件化', '构建应用'],
                bgColor: '#4CAF50',
                currentTime: ''
            },
            methods: {
                increment: function() {
                    this.clickCount++;
                },
                decrement: function() {
                    this.clickCount--;
                },
                toggleVisibility: function() {
                    this.isVisible = !this.isVisible;
                },
                updateTime: function() {
                    this.currentTime = new Date().toLocaleString();
                }
            },
            computed: {
                reversedText: function() {
                    return this.inputText.split('').reverse().join('');
                }
            },
            mounted: function() {
                this.updateTime();
            }
        })
    </script>
</body>
</html>